<template>
  <div class="flex gap-[10px] bg-white rounded-full w-full h-[60px] items-center px-[20px]">
    <input
      type="text"
      v-model="newCategoryType"
      class="flex-1 outline-0 w-0 basis-0 text-[24px] text-[#c9c9c9] font-semibold"
      placeholder="Search"
    />
    <a
      href="#"
      @click="handleClickSearch($event)"
      class="cursor-pointer"
    >
      <XMSearchIcon
        :color="themeJson?.element"
        :size="24"
      />
    </a>
  </div>
</template>

<script lang="ts" setup>
import { useConfigStore } from "~/composables/useConfigStore";
import { toastContent } from "./data";

const { categoryType = "" } = useRoute().query;
const newCategoryType = ref<string>(categoryType as string);
const { config } = useConfigStore();
const { themeJson } = config.value;

const handleClickSearch = (event: MouseEvent) => {
  if (!newCategoryType.value) {
    MessagePlugin.error({
      content: toastContent,
      style: { width: "max-content" },
    });
    return;
  }
  event.preventDefault();
  window.location.href = getTargetUrl(`/searchResult?categoryType=${newCategoryType.value}`);
};
</script>

<style scoped></style>
